<template include="./view/htm/my.template.htm">
	<slot name="my_body">
		<div class="col-lg-6 mx-auto">
			<form action="<?php echo url('my-mobile-bind');?>" method="post" id="form">
				<p>绑定手机号：</p>
				<div class="form-group input-group">
					<div class="input-group-prepend">
						<span class="input-group-text"><i class="icon-user"></i></span>
					</div>
					<input type="text" class="form-control" value="<?php echo $user['username'];?>" disabled />
					<div class="invalid-feedback"></div>
				</div>
				
				<div class="form-group input-group">
					<div class="input-group-prepend">
						<span class="input-group-text"><i class="icon-mobile"></i></span>
					</div>
					<input type="text" class="form-control" placeholder="<?php echo lang('mobile');?>" name="mobile" id="mobile">
					<div class="invalid-feedback"></div>
				</div>
				
				<div class="media">
					<div class="media-body">
						<div class="form-group input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="icon-key"></i></span>
							</div>
							<input type="text" class="form-control" placeholder="<?php echo lang('verify_code');?>" name="code" id="code">
						</div>
					</div>
					<div class="ml-1 mt-1">
						<button type="submit" class="btn btn-primary btn-sm ml-3" id="send" data-loading-text="<?php echo lang('sending');?>..." action="<?php echo url('user-send_code-bind_mobile');?>"><?php echo lang('send_verify_code');?></button>
					</div>
				</div>
				
				<button type="submit" class="btn btn-primary btn-block" id="submit" data-loading-text="<?php echo lang('submiting');?>..." <?php if($kv_mobile['user_create_on']) { ?>disabled<?php } ?>><?php echo lang('next_step');?></button>
			</form>
		</div>
	</slot>
	
</template>
<script>
$('a[data-active="my"]').addClass('active');
$('a[data-active="my-mobile"]').addClass('active');
</script>

<script>
var jform = $('#form');
var jsubmit = $('#submit');
var jsend = $('#send');
var jcode = $('#code');
jsend.on('click', function() {
	jform.reset();
	jsend.button('loading');
	var postdata = jform.serialize();
	$.xpost(jsend.attr('action'), postdata, function(code, message) {
		if(code == 0) {
			$.alert(message);
			jcode.focus();
			var t = 60; // 倒计时
			jsend.button('<?php echo lang('user_send_sucessfully');?> 60 ');
			jsubmit.button('reset');
			// 倒计时，重新发送
			var handler = setInterval(function() {
				jsend.button('<?php echo lang('user_send_sucessfully');?> '+(--t)+' ');
				if(t == 0) {
					clearInterval(handler);
					jsend.button('reset');
				}
			}, 1000);
		} else if(code < 0) {
			$.alert(message);
			jsend.button('reset');
		} else {
			jform.find('[name="'+code+'"]').alert(message).focus();
			jsend.button('reset');
		}
	});
	return false;
});

jform.on('submit', function() {
	jform.reset();
	jsubmit.button('loading');
	var postdata = jform.serialize();
	$.xpost(jform.attr('action'), postdata, function(code, message) {
		if(code == 0) {
			$.alert(message);
			jsubmit.button(message).delay(1000).location(xn.url('my-mobile'));
		} else if(code < 0) {
			$.alert(message);
			jsubmit.button('reset');
		} else {
			jform.find('[name="'+code+'"]').alert(message).focus();
			jsubmit.button('reset');
		}
	});
	return false;
});

</script>